<template>
  <div>
    <div :id="detail.identifier" ref="chartView" class="view-chart-water">
    </div>
    <div v-show="false">{{ width }}{{ height }}{{ detail.style.waterColor }}{{ typeChange }}</div>
  </div>

</template>

<script>
import BaseView from '../View';
import 'echarts-liquidfill'; // 引入水球图的组件
export default {
  name: 'ViewChart',
  extends: BaseView,
  computed: {
    typeChange: function () {
      this.$nextTick(function () {
        this.setOption(0)
      });
      return this.detail.style.waterShape + this.detail.style.waterFontSize + this.detail.style.waterBorderWidth
          + this.detail.style.waterBorderColor + this.detail.style.waterBackColor + this.detail.style.waterColor
    },
    width: function () {
      this.$nextTick(function () {
        this.myChart.resize({
          width: this.detail.style.position.w,
          height: this.detail.style.position.h
        });
      });
      return this.detail.style.position.w
    },
    height() {
      this.$nextTick(function () {
        this.myChart.resize({
          width: this.detail.style.position.w,
          height: this.detail.style.position.h
        });
      });
      return this.detail.style.position.h
    },
  },
  data() {
    return {
      myChart: null,
    }
  },
  watch: {
    paramValue(newVal, oldVal) {
      if (isNaN(newVal)) {
        newVal = 0;
      }
      this.$nextTick(function () {
        this.setOption(newVal)
      });
    }
  },
  methods: {
    setOption(paramValue) {
      let waterData = paramValue / 100
      if (waterData > 1) {
        waterData = 1
      }
      let unit = this.detail.dataBind.paramUnit == null ? '' : this.detail.dataBind.paramUnit
      let option = {
        series: [{
          // 液位图
          type: 'liquidFill',
          //显示文字
          label: {
            formatter: function (param) {
              return parseInt(param.value * 100) + unit
            },
            fontSize: this.detail.style.waterFontSize,
            position: ["50%", "50%"]
          },
          //波浪颜色
          color: [this.detail.style.waterColor],
          //鼠标放上显示
          tooltip: {
            show: true
          },
          //transparent
          backgroundStyle: {
            //边框宽度
            borderWidth: this.detail.style.waterBorderWidth,
            borderColor: this.detail.style.waterBorderColor,
            //背景色
            color: this.detail.style.waterBackColor
          },
          data: [waterData],
          // 液位图类型 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow',svg路径,container(充满容器)
          shape: this.detail.style.waterShape,
          name: '名称',
          outline: {
            //边框
            show: false
          },
          //初始动画加载时间，毫秒
          animationDuration: 0,
          //数据更改加载时间，毫秒
          animationDurationUpdate: 2000,
          //数据更改样式
          animationEasingUpdate: "cubicOut",
          //波浪坡度
          amplitude: 5,
          //液体滚动速度
          period: function (value, index) {
            // 滚动毫秒
            return 2000;
          }
        }]
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById(this.detail.identifier));
    this.setOption(0)
  }
}
</script>

<style lang="scss">
.view-chart-water {
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
